<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="App"></div>
    <script>
        const app = {
            type:"div",
            props:{
                className:"Box",
                children:[
                    {
                        type:"span",
                        props:{
                            className:"span_1",
                            children:["hi，my is span"]
                        }
                    },
                    {
                        type:"p",
                        props:{
                            className:"p_1",
                            children:["hi，my is p"]
                        }
                    }
                ]
            }
        }
        //      自己模拟好的app   root是入口文件
        const render = (jsx,root) =>{
            const createElement = (jsx,parent) =>{
                    //jsx 咱们定义好的APP 
                    // parent 是入口文件
                    let cur = null 
                    if (typeof jsx == "string") {
                        cur = document.createTextNode(jsx)
                    }else {
                        let {type,props} =  jsx
                        // Object.keys 获取对象的key值  返回一个数组
                        console.log(Object.keys(props));
                        cur = document.createElement(type)
                        // Array.isArray() 判断一个数组是不是一个数组  如果是返回true 如果不是返回false
                        // console.log(Array.isArray(Object.keys(props)));
                        Object.keys(props).map(item=>{
                            switch (item) {
                                case "className":
                                    cur.setAttribute('class',props[item])
                                    break;
                                case "children":
                                    if (Array.isArray(props.children)) {
                                        props.children.map(val => {
                                            //递归调用
                                            createElement(val,cur)
                                        })
                                    }   
                                break;
                            }
                        })
                    }
                parent.append(cur)
            }
            createElement(jsx,root)
        }
        render(app,document.querySelector("#App"))
    </script>
</body>
</html>